<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <Card :bordered="false" dis-hover>
        <Form>
            <FormItem>
                <h3 class="ivu-mb-8">原网站信息：</h3>
                <Input v-width="200" clearable v-model='copyparams.source_url' placeholder='请输入原网站网址' />
                <Input class="ivu-ml-16" v-width="300" clearable v-model='copyparams.article_id' placeholder='请输入原网站文章ID，多个ID请用逗号隔开' />
            </FormItem>
             <Divider dashed />
            <FormItem>
                <h3 class="ivu-mb-8">目标网站信息：</h3>
                <Row :gutter="16" class="ivu-mb-16">
                    <Col><Button type="primary" :disabled="copyparams.source_url==''||copyparams.article_id==''||copyparams.id_data==''"
                    	v-hasC="{name: '-v1-copy-index-copy5',flag: '/v1/copy/index/copy'}" @click="batchcopy">批量复制</Button></Col>
                    <Col><Button type="primary"
                    	v-hasC="{name: '-v1-copy-index-copy-logs',flag: '/v1/copy/index/copy-logs'}" @click="seelog">查看日志</Button></Col>
                    <Col><Button type="primary" @click="handleEdit(false)"
                    	v-hasC="{name: '-v1-copy-index-copy-arc-add',flag: '/v1/copy/index/copy-arc-add'}">新增</Button></Col>
                </Row>
                <JG-table
                    ref="table"
                    :params="params"
                    :data="data"
                    :total="total"
		            :loading="loading"
		            :butshow="butshow"
                    :columns="columns"
                    @askData="askData"
                    @handleEdit="handleEdit"
                    @on-select="selectionchange"
                    @handleDelete="handleDelete"></JG-table>
            </FormItem>
        </Form>
        <Modal
            v-model="modaldel"
            title="删除提醒"
            @on-cancel="cancel" width="420">
            <p >删除该目标站点？</p>
            <div slot="footer">
                <Button type="error" :loading="modal_loading" @click="del">确定删除</Button>
                <Button @click="cancel">取消</Button>
            </div>
        </Modal>
        <modal ref="modal" @askData="askData"/>
        <drawer ref="drawer" @askData="askData"/>
    </Card>
</template>
<script>
    import { copyindexindex, copyindexcopy, copyindexcopyarcdel } from '@api/copytext'
    /* 多余属性注释请删除 */
    import modal from './modal';
    import drawer from './drawer';
    export default {
        components: { modal, drawer },
        name: '',
        data () {
            return {
                butshow: {
                    Edit: {
                        name: '-v1-copy-index-copy-arc-edit',
                        flag: '/v1/copy/index/copy-arc-edit'
                    },
                    Delete: {
                        name: '-v1-copy-index-copy-arc-del',
                        flag: '/v1/copy/index/copy-arc-del'
                    }
                },
                total: -1,
                loading: false,
                params: { page: 1, pageSize: 10 }, // 请求参数
                copyparams: { source_url: '', article_id: '', id_data: '' },
                columns: [
                    { type: 'selection', width: 60, align: 'center' },
                    { title: '目标网站网址', key: 'domain', width: 200 },
                    { title: '目标网站栏目ID', key: 'column_id', width: 160 },
                    { title: '目标网站栏目名称', key: 'typename', minWidth: 200 },
                    { title: '操作', slot: 'action', width: 120 }
                ],
                data: [],
                modaldel: false,
                modal_loading: false,
                id: null
            };
        },
        mounted () {
            this.initial()
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial () {
                this.askData()
            },
            askData (res) {
                this.loading = true
                copyindexindex().then(res => {
                    this.data = res
                    this.loading = false
                }).catch(() => {
                    this.loading = false;
                });
            }, // 请求数据处理
            handleEdit (row) {
                this.$refs.modal.initial(row)
            },
            handleDelete (row) {
                this.modaldel = true
                this.id = row.id
            },
            cancel () {
                this.id = null
                this.modaldel = false
                this.modal_loading = false
            },
            del () {
                this.modal_loading = true
                copyindexcopyarcdel({ target_id: this.id }).then(() => {
                    this.$Message.success('删除成功');
                    this.askData();
                    this.cancel()
                    this.modal_loading = false
                });
            },
            selectionchange (select) {
                let ids = []
                select.forEach(e => {
                    ids.push(e.id)
                })
                this.copyparams.id_data = ids.join(',')
            },
            batchcopy () {
                copyindexcopy(this.copyparams).then(res => {
                    let data = [];
                    res.logs.forEach(item => {
                        if (item.state === 2) {
                            data.push(`<div>失败网站：<span style="color:red">${item.source_url}</span> 失败原因：<span style="color:red">${item.remark}</span></div>`)
                        }
                    })
                    this.$refs.table.$refs.table.selectAll(false)
                    this.$Message.success('复制成功');
                    this.$Modal.info({
                        title: '执行结果',
                        content: `
                        <p>共执行：<span style="color:red">${res.total}</span>条</p>
                        <p>成功：<span style="color:red">${res.success_num}</span>条</p>
                        <p>失败：<span style="color:red">${res.fail_num}</span>条</p>
                        <div>${data}</div>
                        `,
                        onOk: () => {
                        }
                    });
                })
            },
            seelog () {
                this.$refs.drawer.initial()
            }
            //   <div v-for=${(item, index) in res.logs}>
            //             <span>失败网站：</span>
            //             <span style="color:red">${item.source_url}</span>
            //             <span>失败原因：</span>
            //               <span style="color:red">${item.remark}</span>
            //             </div>
        }
    }
</script>
